* {
  padding: 0;
  margin: 0;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
button {
  margin: 10px;
}
/* button1 */
.button1 {
  position: relative;
  width: 150px;
  height: 40px;
  border-radius: 20px;
  background-color: aqua;
  border: 1px solid transparent;
  overflow: hidden;
}

.button1:hover {
  background-color: orange;
}

.button1::before {
  position: absolute;
  content: "";
  /* 默认移除按钮可视区域 */
  width: 50%;
  height: 100%;
  top: 0;
  left: -50%;
  /* 背景图使用linear-gradient方法生成60度的过渡渐变 */
  /* 原教程使用一个transparent，但实际效果并不明显，所有此处使用两个 */
  background-image: linear-gradient(
    60deg,
    transparent,
    transparent,
    #fff,
    transparent,
    transparent
  );
  /* 过渡动画 left 属性 0.5秒时长 */
  transition: left 0.5s;
}
.button1:hover::before {
  left: 100%;
}

/* button2 */
.button2 {
  position: relative;
  width: 150px;
  height: 40px;
  border-radius: 20px;
  border: 1px solid transparent;
  /* 使用linear-gradient生成一个线性渐变的“背景图” */
  background-image: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  /* 放大背景图 */
  background-size: 400%;
  /* 这里是为了让a标签的背景显示在a::before的下面 */
  z-index: 1;
}

.button2:hover {
  /* 创建动画
        动画名称show
        执行时间8秒
        线性
        循环执行
    */
  animation: show 8s linear infinite;
}

/* 动画主体
    从初始到结束，移动背景图的位置
*/
@keyframes show {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}

.button2::before {
  position: absolute;
  content: "";
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 20px;
  /* 使用linear-gradient生成一个线性渐变的“背景图” */
  background-image: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  /* 放大背景图 */
  background-size: 400%;
  opacity: 0;
  filter: blur(20px);
  z-index: -1;
}

.button2:hover::before {
  opacity: 1;
  /* 背景炫光增加动画 */
  /* 与按钮的动画保持一致 */
  /* 创建动画
        动画名称show
        执行时间8秒
        线性
        循环执行
    */
  animation: show 8s linear infinite;
}
